import html2canvas from 'html2canvas'
import { ref } from 'vue'

const screenClip = () => {
  const showBack = ref<boolean>(false)
  const ctx = ref<CanvasRenderingContext2D | null | undefined>(null)
  const ctxShow = ref<CanvasRenderingContext2D | null | undefined>(null)
  const canvasShow = ref<HTMLCanvasElement | null>(null)
  const imgRef = ref<HTMLImageElement | null>(null)
  const StartX = ref<number>(0)
  const StartY = ref<number>(0)
  const EndW = ref<number>(0)
  const EndH = ref<number>(0)
  const rx = ref<number>(0)
  const ry = ref<number>(0)
  const temrx = ref<number>(0)
  const temry = ref<number>(0)
  const flagArc = ref<boolean>(false)
  const flagCom = ref<boolean>(false)
  const canvasFile = ref<File | null>(null)
  const canvasHeight = ref<number>(0)
  const canvasWidth = ref<number>(0)
  const canvasScale = ref<number>(0)
  imgRef.value = document.createElement('img')
  html2canvas(document.body, {
    useCORS: true, // 【重要】开启跨域配置
    scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
    allowTaint: true // 允许跨域图片
  }).then(canvas => {
    console.log(canvas)
    imgRef.value!.src = canvas.toDataURL()
    canvas.style.width = '100vw'
    canvas.style.height = '100vh'
    canvas.style.position = 'absolute'
    canvas.style.top = '0'
    canvas.style.left = '0'
    canvas.style.zIndex = '9999'
    document.body.appendChild(canvas)
    ctx.value = canvas.getContext('2d')
    const getStart = (e: MouseEvent) => {
      MouseDown(e)
    }
    const getEnd = () => {
      if (flagArc.value) {
        rx.value = temrx.value
        ry.value = temry.value
      }

      flagArc.value = true
      confirm()
      canvas.removeEventListener('mousemove', getMove)
    }
    const getMove = (e: MouseEvent) => {
      confirm()
      flagArc.value ? moveArc(e) : MouseMove(e)
    }
    const MouseDown = (e: MouseEvent) => {
      if (!flagArc.value) {
        resetImg()
      }
      StartX.value = e.offsetX
      StartY.value = e.offsetY
      canvas.addEventListener('mousemove', getMove)
    }
    const MouseMove = (e: MouseEvent) => {
      resetImg()
      const w = EndW.value
      const h = EndH.value
      const x = rx.value
      const y = ry.value
      EndW.value = e.offsetX - StartX.value
      EndH.value = e.offsetY - StartY.value
      rx.value = (StartX.value + e.offsetX) / 2
      ry.value = StartY.value
      ctx.value?.beginPath()
      ctx.value!.lineWidth = (0.5 * canvasWidth.value) / 400

      if (
        ry.value < Math.abs(EndW.value) / 2 ||
        ry.value + Math.abs(EndW.value) / 2 > canvasHeight.value ||
        rx.value + Math.abs(EndW.value) / 2 > canvasWidth.value
      ) {
        // 高度超出
        EndW.value = w
        EndH.value = h
        rx.value = x
        ry.value = y
        ctx.value?.arc(x, y, Math.abs(w) / 2, 0, 2 * Math.PI)
        temrx.value = x
        temry.value = y
      } else {
        temrx.value = rx.value
        temry.value = ry.value
        ctx.value?.arc(rx.value, ry.value, Math.abs(EndW.value) / 2, 0, 2 * Math.PI)
      }
      ctx.value?.stroke()
    }
    const moveArc = (e: MouseEvent) => {
      resetImg()
      ctx.value?.beginPath()
      const resX = rx.value + e.offsetX - StartX.value
      const resY = ry.value + e.offsetY - StartY.value
      let nextX = resX
      let nextY = resY
      if (resY < Math.abs(EndW.value) / 2 || resY + Math.abs(EndW.value) / 2 > canvasHeight.value) {
        // top 超出
        nextY = temry.value
      }
      if (resX < Math.abs(EndW.value) / 2 || resX + Math.abs(EndW.value) / 2 > canvasWidth.value) {
        // ctx.value?.arc(temrx.value, resY, Math.abs(EndW.value) / 2, 0, 2 * Math.PI);
        nextX = temrx.value
      }
      ctx.value?.arc(nextX, nextY, Math.abs(EndW.value) / 2, 0, 2 * Math.PI)

      temrx.value = nextX
      temry.value = nextY

      ctx.value?.stroke()
    }
    const loadImg = () => {
      ctx.value?.drawImage(imgRef.value!, 0, 0, canvasWidth.value, canvasHeight.value)
    }
    const canvasToBase64 = () => {
      const file = addFile()
      var aDom = document.createElement('a') // 创建一个 a 标签
      aDom.download = file.name // 设置文件名
      let href = URL.createObjectURL(file) // 将file对象转成 UTF-16 字符串
      aDom.href = href // 放入href
      document.body.appendChild(aDom) // 将a标签插入 body
      aDom.click() // 触发 a 标签的点击
      document.body.removeChild(aDom) // 移除刚才插入的 a 标签
      URL.revokeObjectURL(href) // 释放刚才生成的 UTF-16 字符串
    }
    const addFile = (): File => {
      // 默认是png
      const url = canvasShow.value!.toDataURL('image/jpeg')
      const arr = url.split(',')
      const mime = arr[0].match(/:(.*?);/)![1] // 此处得到的为文件类型
      const bstr = atob(arr[1]) // 此处将base64解码
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      // 通过以下方式将以上变量生成文件对象，三个参数分别为文件内容、文件名、文件类型
      const file = new File([u8arr], 'filename.jpg', { type: mime })
      canvasFile.value = file
      return file
    }
    const resetImg = () => {
      ctx.value?.clearRect(0, 0, canvasWidth.value, canvasHeight.value)
      loadImg()
    }
    const reset = () => {
      resetImg()
      StartX.value = 0
      StartY.value = 0
      EndH.value = 0
      EndW.value = 0
      rx.value = 0
      ry.value = 0
      temrx.value = 0
      temry.value = 0
      flagArc.value = false
      ctxShow.value?.drawImage(imgRef.value!, 0, 0, canvasWidth.value / 2, canvasWidth.value / 2)
    }
    const confirm = () => {
      const w = Math.abs(EndW.value)
      ctxShow.value?.drawImage(
        imgRef.value!,
        temrx.value - w / 2,
        temry.value - w / 2,
        w,
        w,
        0,
        0,
        canvasWidth.value / 2,
        canvasWidth.value / 2
      )
    }
    const completeFile = () => {
      addFile()
      //   emit('canvasFile', canvasFile.value)
      reset()
      showBack.value = false
    }

    // const url = canvas.toDataURL('image/jpeg', 1.0)
    // const arr = url.split(',')
    // const mime = arr[0].match(/:(.*?);/)![1] // 此处得到的为文件类型
    // const bstr = atob(arr[1]) // 此处将base64解码
    // let n = bstr.length
    // const u8arr = new Uint8Array(n)
    // while (n--) {
    //   u8arr[n] = bstr.charCodeAt(n)
    // }
    // // 通过以下方式将以上变量生成文件对象，三个参数分别为文件内容、文件名、文件类型
    // const file = new File([u8arr], 'filename.jpg', { type: mime })
    // var aDom = document.createElement('a') // 创建一个 a 标签
    // aDom.download = file.name // 设置文件名
    // let href = URL.createObjectURL(file) // 将file对象转成 UTF-16 字符串
    // aDom.href = href // 放入href
    // document.body.appendChild(aDom) // 将a标签插入 body
    // aDom.click() // 触发 a 标签的点击
    // document.body.removeChild(aDom) // 移除刚才插入的 a 标签
    // URL.revokeObjectURL(href) // 释放刚才生成的 UTF-16 字符串
    canvas.addEventListener('mousedown', getStart)
    canvas.addEventListener('mouseup', getEnd)
  })
}

export default screenClip
